<script setup lang="ts">
  import {NO_DATA_FOUND_TEXT} from '~/common/constants'

  defineProps({
    articleDataList: {
      type: Array < Object >,
      require: true
    }
  })
  const nuxtApp = useNuxtApp()
  const emit = defineEmits(['delete'])
  function deleteById(id) {
    nuxtApp.$mutual['dialog'].warning({
      title: '提示',
      content: '确定删除？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        const {data, msg} = await nuxtApp.$request(`/u/article/${id}`,{
          method: 'DELETE',
          server: true,
          key: 'deleteUArticleById'
        }).catch(e => {
          // nuxtApp.$mutual['notification'].error({
          //   content: e.message,
          //   duration: 5000
          // })
        })
        nuxtApp.$mutual['notification'].success({
          content: msg,
          duration: 3000
        })
        emit('delete', id)
      },
      onNegativeClick: () => {
      }
    })
  }
  function handleSelect(e, id) {
    console.log(e)
    if (e == '0') {
      deleteById(id)
    } else {
      navigateTo(`/article/new?id=${id}&type=article`)
    }
  }
  function toDet(id: String | Number) {
    navigateTo(`/article/${id}`, {
      replace: true,
      open: {
        target: '_blank'
      }
    })
  }
</script>

<template>
  <div class="entry-list-container">
    <ClientOnly>
      <!-- 数据列表 start-->
      <div class="entry-list-wrap">
        <div class="essays-container">
          <div
            class="link"
            v-for="item in articleDataList" :key="item.id"
            @click="toDet(item.id)"
          >
            <div class="essay-list">
              <div class="first-line">
                <span class="tag audit-tag audit-wait">
                  {{item.staLabel}}
                </span>
                <span class="title">{{item.title}}</span>
                <OperateDropdown @operation="handleSelect($event, item.id)"></OperateDropdown>
              </div>
              <div class="infos">
                <span>{{$moment.utcTransLocaleDate(item.publishTime)}} </span>
                <span class="split-line"></span>
                <span>{{item.viewCount}}展现</span>
                <span class="dot">·</span>
                <span>{{item.viewCount}}阅读</span>
                <span class="dot">·</span>
                <span>{{item.likeCount}}点赞</span>
                <span class="dot">·</span>
                <span>0评论</span>
                <span class="dot">·</span>
                <span>0收藏</span></div>
            </div>
          </div>
        </div>
        <NEmpty v-if="!articleDataList.length" :description="NO_DATA_FOUND_TEXT"/>
      </div>
      <!-- 数据列表 end-->
    </ClientOnly>
  </div>
</template>

<style scoped lang="scss">
  .entry-list-container {
    background-color: var(--tidy-layer-1);
    border-radius: 4px;
    .link {
      display: block;
      /*padding: 0 20px;*/
      text-decoration: none;
      cursor: pointer;
      color: #909090;
      .essay-list{
        box-sizing: border-box;
        width: 100%;
        padding: 16px 20px;
        border-bottom: 1px solid #e5e6eb;
        .first-line {
          position: relative;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          .tag {
            flex: none;
            margin-right: 8px;
          }
          .audit-tag {
            display: inline-block;
            vertical-align: middle;
            box-sizing: border-box;
            padding: 0 4px;
            font-size: 12px;
            font-weight: 400;
            height: 20px;
            line-height: 20px;
            border-radius: 2px;
            white-space: nowrap;
          }
          .audit-wait {
            color: #ff7d00;
            background: #fff7e8;
          }
          .title {
            max-width: calc(100% - 20px);
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #1d2129;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: auto;
          }
          .byte-dropdown {
            display: inline-block;
            .more-icon {
              font-size: 24px;
              color: #4e5969;
            }
            .byte-icon {
              width: 1em;
              height: 1em;
              display: inline-block;
              vertical-align: middle;
              line-height: 1;
              svg {
                width: 100%;
                height: 100%;
                fill: currentColor;
                pointer-events: none;
              }
            }
          }
        }
        .infos {
          font-weight: 400;
          font-size: 14px;
          height: 22px;
          line-height: 22px;
          display: flex;
          align-items: center;
          color: #86909c;
          .split-line {
            height: 14px;
            width: 0;
            border-left: 1px solid #e5e6eb;
            margin: 0 16px;
          }
          .dot {
            margin: 0 6px;
          }
        }
      }
    }
  }
</style>
